<template>
  <view class="u-popup">
    <u-overlay
      :show="show"
      @click="overlayClick"
      v-if="overlay"
      :duration="overlayDuration"
      :customStyle="overlayStyle"
      :opacity="overlayOpacity"
    ></u-overlay>
    <u-transition
      :show="show"
      :customStyle="transitionStyle"
      :mode="position"
      :duration="duration"
      @afterEnter="afterEnter"
      @click="clickHandler"
    >
      <view class="u-popup__content" :style="[contentStyle]" @tap.stop="noop">
        <u-status-bar v-if="safeAreaInsetTop"></u-status-bar>

        <slot></slot>

        <view
          v-if="closeable"
          @tap.stop="close"
          class="u-popup__content__close"
          :class="['u-popup__content__close--' + closeIconPos]"
          hover-class="u-popup__content__close--hover"
          hover-stay-time="150"
        >
          <u-icon name="close" color="#909399" size="18" bold></u-icon>
        </view>
        <u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
      </view>
    </u-transition>
  </view>
</template>

<script>
  import props from "./props.js";

  /**
   * popup 弹窗
   * @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
   * @tutorial https://www.uviewui.com/components/popup.html
   * @property {Boolean}			show				是否展示弹窗 (默认 false )
   * @property {Boolean}			overlay				是否显示遮罩 （默认 true ）
   * @property {String}			mode				弹出方向（默认 'bottom' ）
   * @property {String | Number}	duration			动画时长，单位ms （默认 300 ）
   * @property {String | Number}	overlayDuration			遮罩层动画时长，单位ms （默认 350 ）
   * @property {Boolean}			closeable			是否显示关闭图标（默认 false ）
   * @property {Object | String}	overlayStyle		自定义遮罩的样式
   * @property {String | Number}	overlayOpacity		遮罩透明度，0-1之间（默认 0.5）
   * @property {Boolean}			closeOnClickOverlay	点击遮罩是否关闭弹窗 （默认  true ）
   * @property {String | Number}	zIndex				层级 （默认 10075 ）
   * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离 （默认 true ）
   * @property {Boolean}			safeAreaInsetTop	是否留出顶部安全距离（状态栏高度） （默认 false ）
   * @property {String}			closeIconPos		自定义关闭图标位置（默认 'top-right' ）
   * @property {String | Number}	round				圆角值（默认 0）
   * @property {Boolean}			zoom				当mode=center时 是否开启缩放（默认 true ）
   * @property {Object}			customStyle			组件的样式，对象形式
   * @event {Function} open 弹出层打开
   * @event {Function} close 弹出层收起
   * @example <u-popup v-model="show"><text>出淤泥而不染，濯清涟而不妖</text></u-popup>
   */
  export default {
    name: "u-popup",
    mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
    data() {
      return {
        overlayDuration: this.duration + 50,
      };
    },
    watch: {
      show(newValue, oldValue) {
        if (newValue === true) {
          // #ifdef MP-WEIXIN
          const children = this.$children;
          this.retryComputedComponentRect(children);
          // #endif
        }
      },
    },
    computed: {
      transitionStyle() {
        const style = {
          zIndex: this.zIndex,
          position: "fixed",
          display: "flex",
          overflow: "auto",
        };
        style[this.mode] = 0;
        if (this.mode === "left") {
          return uni.$u.deepMerge(style, {
            bottom: 0,
            top: 0,
          });
        } else if (this.mode === "right") {
          return uni.$u.deepMerge(style, {
            bottom: 0,
            top: 0,
          });
        } else if (this.mode === "top") {
          return uni.$u.deepMerge(style, {
            left: 0,
            right: 0,
          });
        } else if (this.mode === "bottom") {
          return uni.$u.deepMerge(style, {
            left: 0,
            right: 0,
          });
        } else if (this.mode === "center") {
          return uni.$u.deepMerge(style, {
            alignItems: "center",
            "justify-content": "center",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
          });
        }
      },
      contentStyle() {
        const style = {};
        // 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
        // 不使用css方案，是因为nvue不支持css的iPhoneX安全区查询属性
        const { safeAreaInsets } = uni.$u.sys();
        if (this.mode !== "center") {
          style.flex = 1;
        }
        // 背景色，一般用于设置为transparent，去除默认的白色背景
        if (this.bgColor) {
          style.backgroundColor = this.bgColor;
        }
        if (this.round) {
          const value = uni.$u.addUnit(this.round);
          if (this.mode === "top") {
            style.borderBottomLeftRadius = value;
            style.borderBottomRightRadius = value;
          } else if (this.mode === "bottom") {
            style.borderTopLeftRadius = value;
            style.borderTopRightRadius = value;
          } else if (this.mode === "center") {
            style.borderRadius = value;
          }
        }
        if (this.mode === "right") {
          style.width = "750rpx";
        }
        return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
      },
      position() {
        if (this.mode === "center") {
          return this.zoom ? "fade-zoom" : "fade";
        }
        if (this.mode === "left") {
          return "slide-left";
        }
        if (this.mode === "right") {
          return "slide-right";
        }
        if (this.mode === "bottom") {
          return "slide-up";
        }
        if (this.mode === "top") {
          return "slide-down";
        }
      },
    },
    methods: {
      // 点击遮罩
      overlayClick() {
        if (this.closeOnClickOverlay) {
          this.$emit("close");
        }
      },
      close(e) {
        this.$emit("close");
      },
      afterEnter() {
        this.$emit("open");
      },
      clickHandler() {
        // 由于中部弹出时，其u-transition占据了整个页面相当于遮罩，此时需要发出遮罩点击事件，是否无法通过点击遮罩关闭弹窗
        if (this.mode === "center") {
          this.overlayClick();
        }
        this.$emit("click");
      },
      // #ifdef MP-WEIXIN
      retryComputedComponentRect(children) {
        // 组件内部需要计算节点的组件
        const names = [
          "u-calendar-month",
          "u-album",
          "u-collapse-item",
          "u-dropdown",
          "u-index-item",
          "u-index-list",
          "u-line-progress",
          "u-list-item",
          "u-rate",
          "u-read-more",
          "u-row",
          "u-row-notice",
          "u-scroll-list",
          "u-skeleton",
          "u-slider",
          "u-steps-item",
          "u-sticky",
          "u-subsection",
          "u-swipe-action-item",
          "u-tabbar",
          "u-tabs",
          "u-tooltip",
        ];
        // 历遍所有的子组件节点
        for (let i = 0; i < children.length; i++) {
          const child = children[i];
          // 拿到子组件的子组件
          const grandChild = child.$children;
          // 判断如果在需要重新初始化的组件数组中名中，并且存在init方法的话，则执行
          if (
            names.includes(child.$options.name) &&
            typeof child?.init === "function"
          ) {
            // 需要进行一定的延时，因为初始化页面需要时间
            uni.$u.sleep(50).then(() => {
              child.init();
            });
          }
          // 如果子组件还有孙组件，进行递归历遍
          if (grandChild.length) {
            this.retryComputedComponentRect(grandChild);
          }
        }
      },
      // #endif
    },
  };
</script>

<style lang="scss" scoped>
  @import "../../libs/css/components.scss";
  $u-popup-flex: 1 !default;
  $u-popup-content-background-color: #fff !default;

  .u-popup {
    flex: $u-popup-flex;
    position: absolute;

    &__content {
      background-color: $u-popup-content-background-color;
      position: relative;

      &--round-top {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }

      &--round-left {
        border-top-left-radius: 0;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 10px;
      }

      &--round-right {
        border-top-left-radius: 10px;
        border-top-right-radius: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 0;
      }

      &--round-bottom {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }

      &--round-center {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }

      &__close {
        position: absolute;

        &--hover {
          opacity: 0.4;
        }
      }

      &__close--top-left {
        top: 15px;
        left: 15px;
      }

      &__close--top-right {
        top: 15px;
        right: 15px;
      }

      &__close--bottom-left {
        bottom: 15px;
        left: 15px;
      }

      &__close--bottom-right {
        right: 15px;
        bottom: 15px;
      }
    }
  }
</style>
